<template>
  <div  @click="() => {if(!isTry) isTry = !isTry}">
    <div id="search" class="flex-center-column">
      <span>Quickly find chemical information from authoritative sources</span>
        <div id="search_box" class="flex-center" @click.stop="()=> ''">
          <aside id="try" @click.stop="() => (isTry = !isTry)" class="handhover">
            Try
            <div class="triangle fade-transform-leave-active" :class="isTry?'triangle_top':'triangle_bottom'"></div>
          </aside>
          <!--<aside id="content">-->
          <el-input type="text" 
            class="input-search"
            style="margin-left: 10px;"
            v-model="searchValue"  
            clearable
            @keyup.enter.native="handleSearch"
            ></el-input>
          <!--</aside>-->
          <aside id="button" class="flex-center" @click="handleSearch">
            <i class="el-icon-search"></i>
          </aside>
          <div id="search_box_muen" v-if="!isTry" @mouseleave="hideSearchBox">
            <h2>Not sure what to seach? Try these example:</h2>
            <ul>
              <li @click="clickSearchLink('700-06-1')">
                <span class="title1">CAS#:</span
                ><span class="title2">700-06-1</span>
              </li>
              <li @click="clickSearchLink('Salicylic')">
                <span class="title1">Chemlcal Name:</span
                ><span class="title2">Salicylic</span>
              </li>
              <li>
                <span class="title1">Publication:</span>
                <span class="title2" @click="clickSearchLink('TR-580');">TR-580、</span>
                <span class="title2" @click="clickSearchLink('TOX-48');">TOX-48</span>
              </li>
              <li @click="clickSearchLink('Radiofrequency radiation emissions from cellular phones');">
                <span class="title1">Project:</span>
                <span class="title2">Radiofrequency radiation emissions from cellular phones</span>
              </li>
              <li @click="clickSearchLink('002-02223-0003-0000-4')">
                <span class="title1">CEBS Accessioon Number:</span
                ><span class="title2"
                  >002-02223-0003-0000-4</span
                >
              </li>
              <li @click="clickSearchLink('20203-01')">
                <span class="title1">NTP TDMS Number:</span
                ><span class="title2"
                  >20203-01</span
                >
              </li>
              <li @click="clickSearchLink('Micronucieus')">
                <span class="title1">NTP Study Type:</span
                ><span class="title2"
                  >Micronucieus</span
                >
              </li>
              <li @click="clickSearchLink('Hematoloy')">
                <span class="title1">Data Typer:</span
                ><span class="title2"
                  >Hematoloy</span
                >
              </li>
              <!-- <li id="big_li" @click="searchValue = 'TR-580、TOX-48'">
                <span class="title1">Study Number:</span>
                <div>
                  <div>
                    <span class="title3">CEBS Accessioon Number:</span
                    ><span class="title2">002-02223-0003-0000-4</span>
                  </div>
                  <div>
                    <span class="title3">NTP TDMS Number:</span
                    ><span class="title2">20203-01</span>
                  </div>
                </div>
              </li>
              <li id="big_li">
                <span class="title1">Study and Data Typer:</span>
                <div>
                  <div>
                    <span class="title3">NTP Study Type:</span
                    ><span class="title2">Micronucieus</span>
                  </div>
                  <div>
                    <span class="title3">Data Typer:</span
                    ><span class="title2">Hematoloy</span>
                  </div>
                </div>
              </li> -->
            </ul>
          </div>
        </div>
      <span
        >Hepatotoxicity&nbsp;aspirm&nbsp; C9H8O4&nbsp; C1=CC=C(C=C1)C=O</span
      >
    </div>
    <div id="main">
      <div class="m1"  v-if="Object.entries(bestMatch).length > 0">
        <div class="title">COMPOUND BEST MATCH</div>
        <div class="border"></div>
        <div class="best" @click="goToDetail(list[0].taid)">
          <img :src="defaultImage" alt="" />
          <div class="content">
            <!-- <h3><span>Search</span> for acurat compound</h3> -->
            <h3 v-html="bestMatch.iupac_name"></h3>
            <ul>
              <li
                v-for="(item, index) in Object.entries(bestMatch).slice(
                  0,
                  Object.entries(bestMatch).length - 1
                )"
                :key="index">
                <span class="name">{{ item[0] }}:&nbsp;</span>
                <span class="value" v-html="item[1]"></span>
              </li>
            </ul>
            <button>approved</button><button>approved</button
            ><button>approved</button>
          </div>
        </div>
      </div>
      <div class="m2" v-if="list.length > 0">
        <div class="title">COMPOUND MATCH</div>
        <div
          class="best"
          v-for="item in list.slice(1)"
          :key="item.taid"
          @click="goToDetail(item.taid)"
        >
          <img :src="defaultImage" alt="" />
          <div class="content">
            <!-- <h3><span>Search</span> for acurat compound</h3> -->
            <h3 v-html="item.iupac_name"></h3>
            <ul>
              <li
                v-for="(item2, index2) in Object.entries(item).slice(
                  0,
                  Object.entries(item).length - 1
                )"
                :key="index2"
              >
                <span class="name">{{ item2[0] }}:&nbsp;</span
                ><span class="value" v-html="item2[1]"></span>
              </li>
            </ul>
            <button>approved</button><button>approved</button
            ><button>approved</button>
          </div>
        </div>
      </div>
      <p v-else class="no-data" style="margin: 20px 0;color: #999;">NoData</p>
      <Pagination
        :pageNo="pageNo"
        :total="total"
        :pageSize="pageSize"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination.vue";
export default {
  components: {
    Pagination,
  },
  data() {
    return {
      defaultImage:require("../assets/img/icon1.png"),// 默认占位图
      searchValue: "",
      pageNo: 1, // 分页
      total: 0,
      pageSize: 10,
      isTry: true,
      list: [],
      bestMatch: {},
    };
  },
  components: {
    Pagination,
  },
  created() {
    //  this.getList({
    //  name: this.$route.query.gene,
    //  type: this.$route.query.type,
    //});
    this.searchValue = this.$route.query.gene;
  },
  beforeRouteEnter(to, from, next) {
    if (from.name === "home" || from.name === "searchCompoundResult") {
      next((vm) => {
        vm.getList2({ name: vm.$route.query.gene });
      });
    } else if(from.name === "search"){
      next((vm) => {
        vm.getList({ name: vm.$route.query.gene,type:vm.$route.query.type });
      });
    } else {
      next((vm) => {
        vm.getSearch({
          name: vm.$route.query.gene,
          // type: vm.$route.query.type,
        });
      });
    }
  },
  methods: {
    getSearch({ name, type }) {
      this.$api.search({
        name,
        pageSize: this.pageSize,
        pageNo: this.pageNo,
        // type,
      }).then(res=>{
        this.total = res.total;
        this.list = res.list.length?res.list:[];
        if (this.pageNo == 1) {
          this.bestMatch = res.list.length?res.list[0]:{};
        }
      })
    },
    getList({ name, type }) {
      this.$api
        .searchCategoryInfo({
          name,
          pageSize: this.pageSize,
          pageNo: this.pageNo,
          type,
        })
        .then((res) => {
          this.total = res.total;
          this.list = res.list.length?res.list:[];
          if (this.pageNo == 1) {
            this.bestMatch = res.list.length?res.list[0]:{};
          }
        });
    },
    getList2({ name }) {
      this.$api
        .search({
          name,
        })
        .then((res) => {
          this.total = res.total;
          this.list = res.list.length?res.list:[];
          if (this.pageNo == 1) {
            this.bestMatch = res.list.length?res.list[0]:{};
          }
        });
    },
    goToDetail(taid) {
      // 获取当前是否有复制的内容 存在则不跳转
      if(this.getSelected()) return false
      this.$router.push({
        path: "/searchCompoundResult",
        query: { id: taid },
      });
    },
    getSelected() {
      if (window.getSelection) {
        return window.getSelection().toString();
      } else if (document.getSelection) {
        return document.getSelection().toString();
      } else {
        var selection = document.selection && document.selection.createRange();
        if (selection.text) {
          return selection.text.toString();
        }
        return "";
      }
    },
    handleCurrentChange(data) {
      this.pageNo = data;
      // if (this.searchValue) {
      //   this.getList({ name: this.searchValue });
      // } else {
      //   this.getList({
      //     name: this.searchValue,
      //     type: this.$route.query.type,
      //   });
      // }
        this.getSearch({
          name: this.searchValue,
          // type: this.$route.query.type,
        });
    },
    clickSearchLink(value){
      console.log(value,'value')
      this.searchValue = value
      
      this.handleSearch()
    },
    handleSearch() {
      this.pageNo = 1;
      // 查询修改为首页原搜索接口
      this.getSearch({
        name: this.searchValue,
        // type: this.$route.query.type,
      });
    },
    // 隐藏 try  下拉
    hideSearchBox(){
      this.isTry = !this.isTry
    }
  },
};
</script>

<style lang="scss" scoped>
#search {
  margin-bottom: 25px;
  width: 100%;
  height: 155px;
  background-image: url(~@/assets/img/search_bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  span {
    height: 19px;
    font-size: 16px;
    font-family: Helvetica;
    color: rgba(255,255,255,0.65);
    line-height: 19px;
  }
  #search_box {
    position: relative;
    width: 620px;
    height: 50px;
    background: #f1f2f7;
    border-radius: 2px;
    padding-left: 14px;
    margin: 8px 0;
    #try {
      width: 45px;
      height: 24px;
      font-size: 14px;
      font-family: Helvetica;
      color: #17233d;
      line-height: 24px;
      position: relative;
      .triangle{
        position: absolute;
        right: 0;
        border-style: solid;
        border-width: 5px;
        border-color: transparent transparent #000 transparent;
        width: 5px;
        height: 5px;
      }
      .triangle_top{
        top:45%;
        transform: translate(-50%,0) rotate(180deg);
      }
      .triangle_bottom{
        top: calc(45% - 5px);
        transform: translate(-50%,0) rotate(0deg);
      }
    }
    .input-search{
      margin:0;
      width:calc(100% - 70px);
      /deep/.el-input__inner{
        background: #f1f2f7;
        border: none !important;
      }
    }
    #button {
      width: 88px;
      height: 50px;
      background: linear-gradient(270deg, #8853ff 0%, #5564fe 100%);
      border-radius: 0px 2px 2px 0px;
      font-size: 28px;
      color: #ffffff;
    }
    input {
      flex: 1;
    }
    #search_box_muen {
      //display: none;
      width: 620px;
      background-color: #fff;
      position: absolute;
      top: 55px;
      left: 0px;
      z-index: 999;
      ul {
        padding-left: 30px;
        list-style: disc;
      }
      li {
        line-height: 25px;
      }

      h2 {
        //width: 334px;
        height: 20px;
        font-size: 16px;
        font-family: Helvetica-Bold, Helvetica;
        font-weight: bold;
        color: #17233d;
        line-height: 20px;
        margin-left: 16px;
      }
      .title1 {
        width: 91px;
        height: 22px;
        font-size: 14px;
        font-family: Helvetica-Bold, Helvetica;
        font-weight: bold;
        color: #515a6e;
        line-height: 22px;
      }
      .title2 {
        width: 302px;
        height: 20px;
        font-size: 12px;
        font-family: Helvetica;
        color: #6e5bfe;
        line-height: 20px;
      }
      .title3 {
        width: 91px;
        height: 22px;
        font-size: 12px;
        font-family: Helvetica-Bold, Helvetica;
        font-weight: bold;
        color: #515a6e;
        line-height: 22px;
      }
    }
  }
}
#main {
  width: 1440px;
  // height: 1906px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  .m1 {
    padding-left: 16px;
    margin-bottom: 24px;
    .title {
      height: 24px;
      font-size: 20px;
      font-family: Helvetica-Bold, Helvetica;
      font-weight: bold;
      color: #17233d;
      line-height: 22px;
      margin-bottom: 9px;
    }
    .border {
      height: 6px;
      width: 1340px;
      background: linear-gradient(270deg, #50aaf8 0%, #4962ff 100%);
      border-radius: 2px 2px 0px 0px;
    }
    .best {
      width: 1340px;
      // height: 272px;
      display: flex;
      // justify-content: flex-start;
      // align-items: center;
      padding: 20px 16px 16px 16px;
      border-radius: 2px 2px 0px 0px;
      background: linear-gradient(154deg, #ffffff 0%, #f3f5ff 100%);
      img {
        width: 210px;
        height: 236px;
        background: #ffffff;
        border-radius: 2px;
        border: 1px solid #dcdee2;
        margin-right: 25px;
      }
      .content {
        flex: 1;
        background-image: url(~@/assets/img/search_bg2.png);
        background-repeat: no-repeat;
        background-position: right bottom;
        h3 {
          // height: 32px;
          font-size: 24px;
          font-family: Helvetica-Bold, Helvetica;
          font-weight: bold;
          color: #6e5bfe;
          line-height: 32px;
          cursor: pointer;
          span {
            color: #ffaa53;
          }
        }
        ul {
          width: 100%;
          font-family: Helvetica;
          line-height: 28px;
          font-size: 14px;
          .name{
            color: #808695;
          }
          .value {
            font-family: Helvetica-Bold, Helvetica;
            color: #34373b;
          }
          span{
            word-break:break-all;
          }
        }
        button {
          height: 30px;
          background: #e6e9ff;
          border-radius: 2px;
          font-size: 12px;
          font-family: Helvetica;
          color: #5169fe;
          border: none;
          margin-right: 10px;
        }
      }
    }
  }
  .m2 {
    padding-left: 16px;
    margin-bottom: 24px;
    .title {
      height: 24px;
      font-size: 20px;
      font-family: Helvetica-Bold, Helvetica;
      font-weight: bold;
      color: #17233d;
      line-height: 22px;
      margin-bottom: 9px;
    }
    .best {
      width: 1340px;
      // height: 272px;
      display: flex;
      padding: 20px 16px 16px 16px;
      background: linear-gradient(154deg, #ffffff 0%, #f3f5ff 100%);
      border-radius: 2px 2px 0px 0px;
      background-color: #f1f2f7;
      margin-bottom: 16px;
      img {
        width: 210px;
        height: 236px;
        background: #ffffff;
        border-radius: 2px;
        border: 1px solid #dcdee2;
        margin-right: 25px;
      }
      .content {
        flex: 1;
        h3 {
          // height: 32px;
          font-size: 24px;
          font-family: Helvetica-Bold, Helvetica;
          font-weight: bold;
          color: #6e5bfe;
          line-height: 32px;
          span {
            color: #ffaa53;
            
          }
        }
        ul {
          width: 100%;
          font-family: Helvetica;
          line-height: 28px;
          font-size: 14px;
          .name{
            color: #808695;
          }
          .value {
            font-family: Helvetica-Bold, Helvetica;
            color: #34373b;
          }
          span{
            word-break:break-all;
          }
        }
        button {
          height: 30px;
          background: #e6e9ff;
          border-radius: 2px;
          font-size: 12px;
          font-family: Helvetica;
          color: #5169fe;
          border: none;
          margin-right: 10px;
        }
      }
    }
  }
}
footer {
  width: 100%;
  height: 113px;
  background: #3f3664;
  padding-right: 120px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .logo {
    margin-left: 120px;
    margin-right: 89px;
    width: 145px;
    height: 40px;
    background-image: url(~@/assets/img/logo_1.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
  .footer_ico {
    flex: 1;
    font-size: 14px;
    font-family: Helvetica;
    color: rgba(255, 255, 255, 0.85);
    line-height: 17px;
    display: flex;
    justify-content: space-evenly;
  }
}
//响应式设计
@media screen and (max-width: 768px) {
  #search {
    #search_box {
      width: 80vw;
      #search_box_muen {
        width: 80vw;
      }
    }
    margin-bottom: 24px;
  }
  #main {
    width: 100vw;
    .m2 {
      width: 100%;
    }
    .m1,
    .m2 {
      padding-right: 16px;
      .border {
        width: 100%;
      }
      .best {
        width: 100%;
        img {
          display: none;
        }
      }
    }
  }
  footer {
    padding-right: 5vw;
    .footer_ico {
      flex-direction: column;
    }
    .logo {
      margin: 0 5vw 0 5vw;
    }
  }
}
</style>
